<template>
  <div class="all">
    <div class="head">
      <div class="auto">
        <div class="left">
          <div class="right_arrow" @click="gooff"></div>
          <div class="tou"></div>
          <span>刘匆匆</span>
        </div>
        <div class="right">
          <div class="follow">关注</div>
          <span v-for="item in 3" :key="item.id"></span>
        </div>
      </div>
    </div>
    <div class="background">
      <div class="ss" :style="{left:`${all}rem`}">
        <div
          class="pictrue"
          v-for="(item,index) in back"
          :key="index"
          :style="{ backgroundImage: `url(${item.url})` }"
        ></div>
        <div class="moun">{{active+1}}/3</div>
      </div>
    </div>
    <div class="drop">
      <span v-for="(item,index) in 3" :key="index" @click="fun(index)" :class="active==index? 'active':''"></span>
    </div>
    <div class="write">
      <div class="top">
        <h1>#布偶猫户外特写</h1>
      </div>
      <div class="content">
        <div class="cont">
          <h2>带宠物去看了樱花</h2>
          <h2>阳光和樱花氛围感美女前来报到</h2>
        </div>
        <h4>#新手养猫 #家宠物好可爱 #我的猫 #吸猫#我的萌宠 ＃拿破仑矮脚猫</h4>
      </div>
    </div>
    <div class="comment">
      <div class="piu">
        <div class="left">
          <input type="text" placeholder="发表评论" />
        </div>
        <div class="ok">
          <div class="he">

            <div class="heart" @click="fun1" :class="biger?'active':''"></div>
            <span>11287</span>
          </div>
          <div class="st">

            <div class="star" @click="fun2" :class="star?'active':''"></div>
            <span>540</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import router from "@/router";
import { reactive, ref } from "vue";

let back = reactive([
  {
    url: require("../../imgytt/cat1.jpg"),
  },
  {
    url: require("../../imgytt/cat22.jpg"),
  },
  {
    url: require("../../imgytt/cat33.jpg"),
  },
]);
function gooff() {
  router.go(-1);
}
let active=ref(0)
let all=ref(0)
let biger=ref(false)
let star=ref(false)
function fun(index){
  active.value=index
  all.value=index*-25.9375
}
function fun1(){
  biger.value=!biger.value
}
function fun2(){
  star.value=!star.value
}
</script>

<style lang="less" scoped>
.all {
  width: 25.9375rem;
}
.head {
  position: relative;
  width: 25.9375rem;
  height: 4.6875rem;
  background-color: #ffffff;
  .auto {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 25rem;
    height: 2.1875rem;
    margin: auto;
    .left {
      float: left;
      .right_arrow {
        float: left;
        width: 2.125rem;
        height: 2.125rem;
        background: url(../../imgytt/you.png) no-repeat center;
        background-size: cover;
      }
      .tou {
        float: left;
        margin-left: .9375rem;
        width: 2.125rem;
        height: 2.125rem;
        border-radius: 1.0625rem;
        background: url(../../imgytt/head1.png) no-repeat center;
        background-size: cover;
      }
      span {
        font-size: 1.375rem;
        color: #000000;
        font-weight: bold;
        font-family: "Ping Fang  SC  Bold";
        margin-left: .9375rem;
      }
    }
    .right {
      float: right;
      .follow {
        float: left;
        width: 2.875rem;
        height: 1.625rem;
        border-radius: .375rem;
        background-color: #fb4679;
        font-size: .75rem;
        color: #000000;
        font-weight: bold;
        font-family: "Ping Fang  SC  Bold";
        text-align: center;
        line-height: 1.625rem;
        margin-right: .9375rem;
        margin-top: .3125rem;
      }
      span {
        display: inline-block;
        width: .5rem;
        height: .5rem;
        border-radius: 50%;
        background: #878686de;
        margin-right: .4375rem;
        margin-top: .8125rem;
      }
    }
  }
}
.background {
  position: relative;
  width: 25.9375rem;
  height: 24.625rem;
  overflow: hidden;
  transition: all 0.5s;
  .ss {
    position: relative;
    width: 93.75rem;
    height: 100%;
    left: 0;
    transition:all 500ms;
        .pictrue {
      float: left;
      width: 25.9375rem;
      height: 24.625rem;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
    }
    .moun {
      position: fixed;
      z-index: 999;
      top: 5.125rem;
      right: 1rem;
      text-align: center;
      opacity: 0.588;
      width: 3.1875rem;
      height: 1.625rem;
      line-height: 1.625rem;
      border-radius: .0625rem;
      background-color: #000000;
      font-size: .875rem;
      color: #ffffff;
      font-weight: 500;
      font-family: "Ping Fang  SC  Medium";
    }
  }
}
.drop {
  width: 2.5rem;
  height: .5rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  margin-top: .625rem;
  span {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #aaaaaa;
    cursor: pointer;
  }
  span.active {
    background-color: #fb4679;
  }
}
.write {
  width: 22.0625rem;
  margin: 1.25rem auto;
  .top {
    opacity: 0.6;
    width: 6.9375rem;
    height: 2.0625rem;
    border-radius: .75rem;
    background-color: #eaeaea;
    h1 {
      font-size: .75rem;
      line-height: 2.0625rem;
      text-align: center;
      color: #000000;
      font-weight: bold;
      font-family: "Ping Fang  SC  Bold";
    }
  }
  .content {
    margin-top: .625rem;
    .cont {
      margin-bottom: .625rem;
      h2 {
        font-size: 1.125rem;
        color: #000000;
        font-weight: bold;
        font-family: "Ping Fang  SC  Bold";
      }
    }
    h4 {
      font-size: 1.125rem;
      color: #1c3563;
      font-weight: bold;
      font-family: "Ping Fang  SC  Bold";
    }
  }
}
.comment {
  position: fixed;
  bottom: 0;
  width: 25.9375rem;
  height: 4.6875rem;
  background-color: #ffffff;
  border-top: #e7e5e5b9 .3125rem solid;
  .left {
    position: absolute;
    top: 0;
    bottom: 0;
    left: .625rem;
    margin: auto;
    width: 14.625rem;
    height: 2.6875rem;
    padding-left: 1.375rem;
    border-radius: .75rem;
    background-color: #e7e5e5ae;
    input {
      line-height: 2.6875rem;
      border: none;
      background: none;
      font-size: .875rem;
    }
    input::placeholder {
      font-size: .875rem;
      color: #707070;
      font-weight: bold;
      font-family: "Ping Fang  SC  Bold";
    }
  }
  .heart {
    background: url(../../imgytt/heart1.png) no-repeat center;
  }
  .heart.active{
    background: url(../../imgytt/heart_in.png) no-repeat center;
  }
  .star.active {
    background: url(../../imgytt/soucang_in.png) no-repeat center;
  }
  .star {
    background: url(../../imgytt/soucang1.png) no-repeat center;
  }
  .heart,
  .star {
    float: left;
    line-height: 4.125rem;
    margin-right: -0.625rem;
    width: 4.25rem;
    height: 4.125rem;
    transform: scale(0.5);
  }
  .ok {
    float: right;
    width: 9.0625rem;
    // display: flex;
    // justify-content: space-around;
    margin-top: -0.625rem;
    margin-right: .3125rem;
    .he{
      width:4.55rem;
      height: 100%;
      position: relative;
      float: left;
    }
    .st{
      height: 100%;
      position: relative;
      float: left;
    }
    span {
      position: absolute;
      left: 40px;
      bottom: 14px;
      margin-top: 1.875rem;
      font-size: .75rem;
      color: #707070;
      font-weight: bold;
      font-family: "Ping Fang  SC  Bold";
    }
  }
  .piu {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0rem;
    right: 0;
    margin: auto;
    height: 2.6875rem;
  }
}
</style>

